<template>
  <div class="actionce">
    <el-tabs>
      <el-form :model="formInline">
        <el-form-item label="案例标题">
          <el-input v-model="formInline.value2"></el-input>
        </el-form-item>
        <el-form-item label="案例风格">
          <el-select v-model="formInline.region" placeholder="案例风格">
             <el-option label="北欧极简" value="c1"></el-option>
      <el-option label="现代简约" value="c2"></el-option>
      <el-option label="美式田园" value="c3"></el-option>
      <el-option label="日式" value="c4"></el-option>
      <el-option label="新中式" value="c5"></el-option>
      <el-option label="地中海" value="c6"></el-option>
      <el-option label="奶油风" value="c7"></el-option>
      <el-option label="原木风" value="c8"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="active" @click="hement">搜索</el-button>
        <el-button class="elcnt" @click="replacement">重置</el-button>
        <el-button
          class="el-icon-plus"
        
          @click="$router.push('/home/addClassic')"
          >新增</el-button
        >
      </el-form>
      <el-table :data="cardlist" style="width: 100%">
        <el-table-column label="案例标题" prop="title" width="350">
        </el-table-column>
        <el-table-column label="案例风格" prop="category.channel" width="270">
          <template v-slot="{row}">
              {{forminfodeet(row.category.channel)}}
          </template>
        </el-table-column>
        <el-table-column label="发布者" prop="title" width="270">
        </el-table-column>
        <el-table-column
          style="width: 20%"
          label="发布状态"
          prop="status">
           <template v-slot="{ row }">
            <el-tag
              :type="row.status === 'Offline'? 'info' : 'success'"
            >
              {{ formatEmployees(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="date" label="发布时间" width="200">
        </el-table-column> -->
        <el-table-column  fixed="right" label="操作" width="200">
          <template v-slot="{ row }">
            <!-- <el-button type="text" size="small">
            <span v-if="row.status == 'Offline'" @click="hcxjin(row)">上架</span>
            <span v-else  @click="cheng(row)">下架</span>
           </el-button> -->
             <el-button class="const" type="text" size="small" @click="hdetail(row)"
              >编辑</el-button>
            <el-button class="const" type="text" size="small" @click="hdetailed(row)"
              >查看详细</el-button>
             <el-button class="const" type="text" size="small" @click="dijia(row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="liyongxin"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>

import { roulescard,addenche,addrolled,tailuo } from "@/api/roles";
import employeesConst from "@/constant/employees";
const hireTypeMap = {};
employeesConst.hireTypyees.forEach((item) => {
  hireTypeMap[item.status] = item.value;
});
const hireTypet = {};
employeesConst.hireTydeet.forEach((item) => {
  hireTypet[item.channel] = item.value;
});
export default {
  data() {
    return {
      formInline: {
        value2: "",
        region: "",
      },
      cardlist: [],
      q: {
        index: 1,
        size: 10,
        type:null,
        searchText:''
      },
    };
  },
  created() {
    this.loadUserDetailById();
  },

  methods: {
    async loadUserDetailById() {
      const res = await roulescard(this.q);
      this.cardlist = res.data.data;
    },
    filterTag(value, row) {
      return row.status === value;
    },
        // 上架
   async hcxjin(row){
      this.$confirm("您确认上架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await addenche(params);
          this.loadUserDetailById();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
    },
    // 下架
    async cheng(row){
   this.$confirm("您确认下架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await addrolled(params);
          this.loadUserDetailById();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
    },
    // 上下架状态
     formatEmployees(code){
     return hireTypeMap[code];
    },
    // 查看详细
    hdetailed(row) {
      this.$router.push({
        path: "/home/imagetext",
        query: { row },
      });
    },
    // 编辑
    hdetail(row){
      this.$router.push({
        path: "/home/addclass",
        query: { row },
      });
    },
    // 删除
    dijia(row){
       this.$confirm("您确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await tailuo(params);
          this.loadUserDetailById();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
        .catch(() => {});
    },
    // 搜索
      hement(){
       if(this.formInline.region != ''){

        this.q.type = this.formInline.region
       this.loadUserDetailById()
      }
      if(this.formInline.value2.trim() !== '') {
       this.q.searchText = this.formInline.value2
       this.loadUserDetailById()
      }
    },
    // 重置
    replacement(){
      this.q.index = 1
      this.formInline.region = ''
      this.formInline.value2 = ''
      this.q.type = null
      this.q.searchText = ''
      this.loadUserDetailById()
    },
    // 渲染分类
    forminfodeet(code){
    return hireTypet[code];
    },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loadUserDetailById();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loadUserDetailById();
    },
    // 发布时间
 
  },
};
</script>

<style scoped>
.actionce {
  background-color: #fff;
  padding: 0px 0 0px 20px;
}
.el-form-item {
  display: inline-block;
  width: 300px;
}
.active {
     background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
     border: 1px solid #ff7144;
  color: #fff;
}

.elcnt:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.elcnt:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.const {
  color: #ff7144;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
.el-button--text {
  color: #ff7144;
}
.el-input{
  width: 70%;
}
</style>
